<template>
  <div class="createTableClass">
     <div class="searchArea">
           <div>
               <div>表名:</div>
               <el-input
                 style="margin-left:5px"
                  placeholder="请输入内容"
                  v-model="tableName"
                  clearable>
               </el-input>
            </div>
            <div>
                <div>表描述:</div>
                <el-input
                  style="margin-left:5px"
                  placeholder="请输入内容"
                  v-model="tableDesc"
                  clearable>
               </el-input>
            </div>
           
            <div class="block">
               <div class="demonstration">建表时间:</div>
               <el-date-picker
                  style="margin-left:5px"
                  v-model="createdDate"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
               </el-date-picker>
           </div>
          <el-button type="primary" style="margin-left:10px"  icon="el-icon-search">搜索</el-button>
          <el-button  icon="el-icon-reset">重置</el-button>
     </div>
     <div class="buttons">
        <div class="buttonsContent">
               <el-button size="small">生成</el-button>
               <el-button size="small">导入</el-button>
               <el-button size="small">修改</el-button>
               <el-button size="small">删除</el-button>
        </div>
     </div>
     <el-table
          ref="multipleTable"
           v-loading="loading"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
           <el-table-column label="表名称">
               <template slot-scope="scope">{{ scope.row.tableName }}</template>
           </el-table-column> 
           <el-table-column label="表描述">
               <template slot-scope="scope">{{ scope.row.tableComment }}</template>
           </el-table-column>
            <el-table-column label="实体类名称">
               <template slot-scope="scope">{{ scope.row.className }}</template>
            </el-table-column>
            <el-table-column label="创建时间">
               <template slot-scope="scope">{{ scope.row.createTime }}</template>
            </el-table-column>
            <el-table-column label="更新时间">
               <template slot-scope="scope">{{ scope.row.updateTime }}</template>
            </el-table-column>
             <el-table-column label="操作" width="270">
                 <template slot-scope="scope">
                    <div class="tableButtons">
                        <el-button size="mini" round>预览</el-button>
                        <el-button size="mini" round @click="editColumn(scope.row.tableId)">编辑</el-button>
                        <el-button size="mini" round>删除</el-button>
                        <el-button size="mini" round>生成代码</el-button>
                    </div>
                 </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
         </el-pagination>
  </div>
</template>
<script lang="ts">
 
import { Component, Vue,Inject} from 'vue-property-decorator';
import FormCreateApi from "@/components/list-create/table-code-create-api";
@Component
export default class ToDoList extends Vue {
     @Inject() tabIndexRef!: any
     private loading:boolean=false;
     private tableData:Array<any>=new Array<any>();
     private createdDate:any="";
     private tableName:any="";
     private tableDesc:any="";
     async created(){
          this.loading=true;
          let tableData=await FormCreateApi.getTables({pageSize: 50,pageNum: 1,orderByColumn: 'createTime',isAsc: 'desc'});
          this.tableData=tableData.data.rows;
          this.loading=false;
     }
     //创建表单
     private submitForm() {
          console.log("XXXXXXX");
     }
     //取消选中
     private handleSelectionChange(){
           console.log("XXXXXXX");
     }
     
     private toggleSelection(){
          console.log("XXXXXXX");
     }
     //修改tableId
     public editColumn(tableId:any){
          let ref=this.tabIndexRef;
          ref.addTab("修改生成配置",{currentTab:'tableCloumnList',index:'10',tableId:tableId});
     }
}
</script>
<style lang="less">
    .createTableClass{
        background-color: #f3f3f4;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        .el-tabs__header{
             margin: 0 0 0px;
        }
        .searchArea{
               margin-top: 5px;
               margin-bottom: 5px;
               width: calc(100% - 10px);
               margin-left: 5px;
               background: #fff;
               border-radius: 6px;
               padding-top: 5px;
               box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
               display: flex;
               padding: 10px 0px;
               >div{
                  display: flex;
                  margin-left: 15px;
                  >div{
                      white-space:nowrap;   
                      display: flex;
                      align-items: center;
                  }
               }
        }
         .buttons{
            background-color: white;
            .buttonsContent{
                margin-top: 10px;
            }
         }
         .tableButtons{
            display: flex;
            .el-button--mini{
                border-radius: 5px!important;
                padding: 7px 9px!important;
            }
         }
         .el-pagination{
             padding-top: 10px;
             padding-bottom: 5px;
             background-color: white;
         }
    }
</style>
